<template>
  <div>
    animate
    <button @click="tranShow">切换</button>
    <div class="haha" :style="{left: left}" @mouseenter="tranLeftFn" @mouseleave="tranLeftFn">haha</div>
    <div class="hehe" :class="{'active': show}">aasdasdasd</div>
    <button @click="checkxixi">切换xixi</button>
    <transition name="fade">
      <div class="xixi" v-show="isShowXixi">xixi</div>
    </transition>
  </div>
</template>

<script>
export default {
  data () {
    return {
      left: '-100px',
      show: false,
      isShowXixi: false
    }
  },
  mounted () {
  },
  methods: {
    tranLeftFn () {
      if (this.left === '-100px') {
        this.left = '0px'
      } else {
        this.left = '-100px'
      }
    },
    tranShow () {
      this.show = !this.show
    },
    checkxixi () {
      this.isShowXixi = !this.isShowXixi
    }
  }
}
</script>

<style>
.haha {
  width: 200px;
  height: 200px;
  background: yellow;
  position: absolute;
  transition: all 1s;
}
.hehe {
  width: 200px;
  height: 200px;
  background: lightcoral;
  position: absolute;
  transition: all 0.3s;
  top: 300px;
  transform-origin: top;
  transform:scaleY(0) ;
}
.active{
  transform:scaleY(1) ;
}
.xixi{
  width: 200px;
  height: 200px;
  background: lightpink;
  position: absolute;
  top: 600px;
  transform-origin: top;
}

.fade-enter {
  transform:scaleY(0) ;
}
.fade-enter-active {
  transition: all .3s ease;
}
.fade-enter-to{
  transform:scaleY(1) ;
}
.fade-leave {
  transform:scaleY(1) ;
}
.fade-leave-active {
  transition: all .3s ease;
}
.fade-leave-to {
  transform:scaleY(0) ;
}
</style>

